<template>
	<view class="roc-checkbox">
		<u-checkbox-group v-model="checkboxValue" :disabled="item.props.disabled || false">
			<u-checkbox
				v-for="(checkboxItem, checkboxIndex) in checkboxList"
				:key="checkboxIndex"
				:label="checkboxItem.label"
				:name="checkboxItem.value"
				:iconSize="26"
				:size="28"
				:labelSize="28"
			></u-checkbox>
		</u-checkbox-group>
	</view>
</template>

<script>
import { apiapi } from '@/api/request.js';
export default {
	name: 'roc-checkbox',
	props: {
		item: {
			type: Object,
			default() {
				return {};
			}
		},
		value: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	data() {
		return {
			checkboxValue: [],
			checkboxList: []
		};
	},
	watch: {
		value(newVal) {
			this.checkboxValue = newVal
		},
		checkboxValue(newVal) {
			this.$emit('input', newVal)
		}
	},
	async created() {
		if (this.item.options == undefined) {
			// 接口数据
			if (
				this.item.effect.fetch != '' &&
				this.item.effect.fetch.action != undefined &&
				this.item.effect.fetch.action != ''
			) {
				const {
					data: { data }
				} = await apiapi(this.item.effect.fetch.action, 'POST', {});
				this.checkboxList = data;
			} else {
				this.$u.toast(`${this.item.title}, 配置错误`);
			}
		} else {
			// 静态数据
			this.checkboxList = this.item.options;
		}
	}
};
</script>

<style>
.roc-checkbox {
	width: 100%;
}
.u-checkbox-group {
	flex-wrap: wrap;
}
</style>
